<template>
	<view >
		<form @submit="formSubmit" report-submit="true">
			<view class="panel">
				<view class="acea-row row-middle">
					<view>开票金额</view>
					<input  :value="price?'￥'+price:0"  disabled="true" />
				</view>
				<view v-if="receipt_title_type == 1" class="acea-row row-middle">
					<view>发票类型</view>
					<input name="receipt_type" :value="typeName" disabled="true" />
				</view>
				<view v-else class="acea-row row-middle" @click.stop="callType">
					<view>发票类型</view>
					<input name="receipt_type" :value="typeName" disabled="true"  />
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="acea-row row-middle">
					<view>抬头类型</view>
					<radio-group name="receipt_title_type" @change="changeHeader">
						<label>
							<radio value="1" :checked="receipt_title_type == 1 ? true : false" /><text>个人</text>
						</label>
						<label>
							<radio value="2" :checked="receipt_title_type == 2 ? true : false" /><text>企业</text>
						</label>
					</radio-group>
				</view>
				<view class="acea-row row-middle" v-if="receipt_title_type == 2 &&receipt_type == 2">
					<view>获取方式</view>
					<radio-group  @change="changeSpecialType">
						<label>
							<radio value="1" :checked=" special_type == 1? true : false" /><text>邮寄（到付）</text>
						</label>
						<label>
							<radio value="2" :checked="special_type == 2 ? true : false" /><text>上门自取</text>
						</label>
					</radio-group>
				</view>
				<view class="acea-row row-middle" v-if="receipt_title_type == 2 &&receipt_type == 2 && special_type == 1">
					<view>邮寄地址</view>
					<input name="postAddress" :value="postAddress" maxlength="30" placeholder="请填写邮寄地址" />
				</view>
				<view class="acea-row row-middle">
					<view>发票抬头</view>
					<input name="receipt_title" :value="receipt_title"  :placeholder="receipt_title_type == 1 ? '需要开具发票的姓名' : '需要开具发票的企业名称'" />
					<!-- <text class="iconfont icon-xiangyou"></text> -->
				</view>
				<view v-show="receipt_title_type === '2' && receipt_title_type === '2'" class="acea-row row-middle">
					<view>税号</view>
					<input name="duty_paragraph" :value="duty_paragraph" maxlength="20" placeholder="纳税人识别号" />
				</view>
				<!-- <view class="acea-row row-middle">
					<view>手机号</view>
					<input name="drawer_phone" :value="drawer_phone" placeholder="您的手机号" />
				</view> -->
				<view class="acea-row row-middle">
					<view>邮箱</view>
					<input name="email" :value="email" placeholder="您的联系邮箱" />
				</view>
			</view>
			<view v-show="receipt_title_type == '2' && receipt_type == '2'" class="panel">
				<view class="acea-row row-middle">
					<view>开户银行</view>
					<input name="bank_name" :value="bank_name" maxlength="15" placeholder="您的开户银行(选填)" />
				</view>
				<view class="acea-row row-middle">
					<view>银行账号</view>
					<input name="bank_code" :value="bank_code" placeholder="您的银行账号(选填)" />
				</view>
				<view class="acea-row row-middle">
					<view>企业地址</view>
					<input name="address" :value="address" maxlength="30" placeholder="您所在的企业地址(选填)" />
				</view>
				<view class="acea-row row-middle">
					<view>企业电话</view>
					<input name="tel" :value="tel" placeholder="您的企业电话(选填)" />
				</view>
			</view>
			<!-- <checkbox-group class="acea-row row-middle panel" name="isDefault" @change="changeDefault">
				<label>
					<checkbox :checked="is_default ? true : false" /><text>设置为默认抬头</text>
				</label>
			</checkbox-group> -->
			<button form-type="submit" :disabled="loading" :class="loading ? 'disabled' : ''">立即提交</button>
		</form>
		<view :class="{ mask: popupType || popupTitle }"></view>
		<view class="popup" :class="{ on: popupType }">
			<view class="title">发票类型选择<text class="iconfont icon-guanbi" @click="closeType"></text></view>
			<scroll-view scroll-y="true">
				<radio-group name="invoice-type" @change="changeType">
					<label v-for="item in invoiceTypeList" :key="item.type" class="acea-row row-middle">
						<view class="text">
							<view>{{ item.name }}</view>
							<view class="info">{{ item.info }}</view>
						</view>
						<radio :value="item.type" :checked="receipt_type == item.type ? true : false" />
					</label>
				</radio-group>
			</scroll-view>
			<button @tap="closeType">确定</button>
		</view>
	<!-- 	<view class="popup" :class="{ on: popupTitle }">
			<view class="title">抬头选择<text class="iconfont icon-guanbi" @click="closeTitle"></text></view>
			<scroll-view scroll-y="true">
				<radio-group name="invoice-title" @change="changeTitle">
					<label class="acea-row row-middle">
						<view class="text">
							<view class="acea-row row-middle">
								<view class="name">西安众邦网络科技有限公司</view>
								<view class="label">默认</view>
							</view>
							<view class="type">普通发票</view>
						</view>
						<radio value="西安众邦网络科技有限公司" :checked="receipt_title === '西安众邦网络科技有限公司' ? true : false" />
					</label>
				</radio-group>
			</scroll-view>
			<button>添加新的抬头</button>
		</view> -->
		<!-- <home></home> -->
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import home from '@/components/home';
	import { invoiceSave, invoiceUpdate, invoiceDetail } from '@/api/user.js';
	import { userBaocheDetail, saveBaocheInvoice } from "@/api/api.js"
	import {
			mapGetters
		} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		computed: mapGetters(['isLogin']),
		
		components: {
			home
		},
		props: {},
		data() {
			return {
				postAddress: '',
				special_type: 0,
				price: "",
				loading: false,
				id: '',
				mer_id: '',
				receipt_title_type: '2',
				receipt_type: '1',
				drawer_phone: '',
				receipt_title: '',
				duty_paragraph: '',
				tel: '',
				address: '',
				bank_name: '',
				bank_code: '',
				is_default: 0,
				email: '',
				isDefault: [],
				typeName: '增值税电子普通发票',
				popupType: false,
				popupTitle: false,
				invoiceTypeList: [{
						type: '1',
						name: '增值税电子普通发票',
						info: '前往包车订单详情自行下载'
					},
					{
						type: '2',
						name: '增值税专用发票',
						info: '纸质发票开出后将以邮寄形式（到付）交付或者上门自取'
					}
				],
				addInvoice: [],
				baoche_id: '',
				baoche: ''
			};
		},
		onLoad: function(options) {
			this.baoche_id = options.baoche_id
			this.price = options.price
		},
		onShow() {
			if(this.isLogin == true){
				// uni.showLoading({
				// 	title:'请稍后...'
				// })
				 // this.userBaocheDetail()
			}else{
				toLogin();
			}
			
			
		},
		methods: {
			
			// 提交发票数据
			formSubmit(e) {
				var that = this
				let formData = e.detail.value;
				console.log("eeee",formData)
				if (formData.receipt_title_type === '2') {
					if (!formData.receipt_title) {
						return this.$util.Tips({
							title: '请输入需要开具发票的企业名称'
						});
					}
					if (!formData.duty_paragraph) {
						return this.$util.Tips({
							title: '请输入纳税人识别码'
						});
					}
					if(this.receipt_type == 2){
						// if (!formData.bank_name) return this.$util.Tips({
						// 	title: '请输入开户行'
						// });
						
						// if (!formData.bank_code) return this.$util.Tips({
						// 	title: '请输入银行账号'
						// });
						if(formData.bank_code && !/^(\d{9}|\d{14}|\d{18})$/.test(formData.bank_code)){
							return this.$util.Tips({
								title: '请输入正确的银行账号'
							});
						}						
						if(formData.tel && !/(^(\d{3,4})?\d{7,8})$|(^1(3|4|5|7|8|9|6)\d{9}$)/i.test(formData.tel)){
							return this.$util.Tips({
								title: '请输入正确的电话号码'
							});
						}	
					}				
				} else {
					if (!formData.receipt_title) {
						return this.$util.Tips({
							title: '请输入需要开具发票的姓名'
						});
					}
				}
				if (formData.email) {
					if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(formData.email)) {
						return this.$util.Tips({
							title: '请输入正确的邮箱'
						});
					}
				}
				this.loading = true;
				formData.receipt_type = this.receipt_type;
				
				
				if(this.receipt_type = 1){
					this.special_type = 0
				}
				
				var data = {};
				data = {
					headerType: this.receipt_title_type,
					type: this.receipt_type,
					name: formData.receipt_title,
					dutyNumber: formData.duty_paragraph,
					email: formData.email,
					tell: formData.tel,
					address: formData.address,
					bank: formData.bank_name,
					cardNumber: formData.bank_code,
					specialType: this.special_type,
					baocheId: this.baoche_id,
					postAddress: formData.postAddress
					
				}
				console.log("data",data)
				uni.showLoading({
					title: '提交中',
					mask: true
				});
			
				saveBaocheInvoice(data).then(res => {
					let that = this
					uni.hideLoading();
					that.$util.Tips({
						title: '提交成功',
						icon: 'success'
					});
					setTimeout(function(){
						uni.reLaunch({
							url:"/pages/bus/baoche/order_detail?baoche_id="+that.baoche_id
						})
					},1000)
					
				}).catch(err => {
					uni.hideLoading();
					this.$util.Tips({
						title: err
					});
					setTimeout(function(){
						uni.reLaunch({
							url:"/pages/bus/baoche/order_detail?baoche_id="+that.baoche_id
						})
					},1000)
					this.loading = false;
				});
			},
		
		
		
		
		    userBaocheDetail(){
		    	uni.showLoading({
		    		title:'请稍后...'
		    	})
		    	userBaocheDetail({'baocheId': this.baoche_id}).then(res => {
					// this.baoche = res.data
		    		uni.hideLoading()
		    	
		    	}).catch(err => {
		    		uni.hideLoading()
		    		return this.$util.Tips({
		    			title: err
		    		});
		    	})
		    },
		
		
		
			callType() {
				this.popupType = true;
				
			},
			changeType(e) {
				this.receipt_type = e.detail.value;
				if( e.detail.value == 2){
					this.special_type = 1
				}
				this.typeName = this.invoiceTypeList.find(value => {
					return value.type === this.receipt_type;
				}).name;
				console.log("4343",this.receipt_title_type)
			},
			closeType() {
				this.popupType = false;
			},
			callTitle() {
				this.popupTitle = true;
			},
			changeTitle(e) {
				this.receipt_title = e.detail.value;
			},
			closeTitle() {
				this.popupTitle = false;
			},
			changeHeader(e) {
				this.receipt_title_type = e.detail.value;
				if (e.detail.value == 1) {
					this.receipt_type = 1;
					this.typeName = '增值税电子普通发票';
				}
			},
			
			changeSpecialType(e) {
				this.special_type = e.detail.value;
				
			},
			changeDefault(e) {
				this.is_default = e.detail.value.length ? 1 : 0;
			}
		}
	}
</script>

<style scoped>
	/deep/radio .wx-radio-input.wx-radio-input-checked,
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked {
	 border: 1px solid  #007AFF!important;
	 background-color: #007AFF!important;
	}
	/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked,
	/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid  #007AFF!important;
	  background-color:  #007AFF!important;
	  color: #fff!important;
	}
	form {
		font-size: 28rpx;
		color: #282828;
	}

	form input,
	form radio-group {
		flex: 1;
		text-align: right;
	}

	form input {
		font-size: 26rpx;
	}

	form label {
		margin-right: 50rpx;
	}

	form radio {
		margin-right: 8rpx;
	}

	form checkbox-group {
		height: 90rpx;
	}

	form checkbox {
		margin-right: 20rpx;
	}
	form button {
		height: 86rpx;
		border-radius: 43rpx;
		margin: 66rpx 30rpx;
		background-color: #007AFF;
		font-size: 30rpx;
		line-height: 86rpx;
		color: #FFFFFF;
	}

	.panel {
		padding-right: 30rpx;
		padding-left: 30rpx;
		background-color: #FFFFFF;
	}

	.panel~.panel {
		margin-top: 14rpx;
	}

	.panel .acea-row {
		height: 90rpx;
	}

	.panel .acea-row~.acea-row {
		border-top: 1rpx solid #EEEEEE;
	}

	.input-placeholder {
		font-size: 26rpx;
		color: #BBBBBB;
	}

	.icon-xiangyou {
		margin-left: 25rpx;
		font-size: 18rpx;
		color: #BFBFBF;
	}

	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		padding-bottom: 100rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background-color: #F5F5F5;
		overflow: hidden;
		transform: translateY(100%);
		transition: 0.3s;
	}

	.popup.on {
		transform: translateY(0);
	}

	.popup .title {
		position: relative;
		height: 137rpx;
		font-size: 32rpx;
		line-height: 137rpx;
		text-align: center;
	}

	.popup scroll-view {
		height: 466rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.popup label {
		padding: 35rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
	}

	.popup .text {
		flex: 1;
		min-width: 0;
		font-size: 28rpx;
		color: #282828;
	}

	.popup .info {
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #909090;
	}

	.popup .icon-guanbi {
		position: absolute;
		top: 50%;
		right: 30rpx;
		z-index: 2;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #707070;
		cursor: pointer;
	}

	.popup button {
		height: 86rpx;
		border-radius: 43rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
		background-color: #007AFF;
		font-size: 30rpx;
		line-height: 86rpx;
		color: #FFFFFF;
	}
	uni-button[disabled]:not([type]), uni-button[disabled][type=default] {
		opacity: .5;
		background-color: #007AFF;
		color: #FFFFFF;
	}
	.popup .text .acea-row {
		display: inline-flex;
		max-width: 100%;
	}

	.popup .name {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
	}

	.popup .label {
		width: 56rpx;
		height: 28rpx;
		border: 1rpx solid #E93323;
		margin-left: 18rpx;
		font-size: 20rpx;
		line-height: 26rpx;
		text-align: center;
		color: #E93323;
	}

	.popup .type {
		width: 124rpx;
		height: 42rpx;
		margin-top: 14rpx;
		background-color: #FCF0E0;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		color: #D67300;
	}

	.popup .type.special {
		background-color: #FDE9E7;
		color: #E93323;
	}
</style>
